<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{::style},~{})">
<title>IP访问管理</title>
<style>
.searchBox {
	width: 100%;
	margin-right: 0;
}

.searchBox	.el-form-item__content {
	width: 100%;
}

/*去掉type为number的箭头*/
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

input[type="number"] {
	-moz-appearance: textfield;
}

</style>
</head>
<body>
	<div id="app" v-loading="loading" class="mainPadding" style="display: none;">
		<el-breadcrumb separator="/" class="elBreadcrumb marginB20">
		<el-breadcrumb-item>Home</el-breadcrumb-item> <el-breadcrumb-item>系统管理</el-breadcrumb-item>
		<el-breadcrumb-item>访问IP管理</el-breadcrumb-item> </el-breadcrumb>
		<template> 
		<el-tabs type="card" v-model="ipManager" @tab-click="handleClick"> <el-tab-pane label="访问IP库" name="first"> 
		<el-row>
			<el-form :inline="true" :model="iprepositoryForm" class="demo-form-inline" ref="iprepositoryForm"> 			
				<el-col :span="18"> 
					<el-button type="primary" @click="openIpAddData"><i class="el-icon-plus"></i>添加IP</el-button>
					<el-button type="danger" @click="delIpGroup"><i class="el-icon-delete"></i>删除</el-button> 
					<el-button type="success" @click="ipTabCreatePackage"><i class="el-icon-plus"></i>创建IP包</el-button> 
				</el-col> 
				<el-col :span="6">
					<el-form-item prop="ipAddress" class="searchBox"> 
						<el-input placeholder="输入包含IP查询" class="input-with-select" v-model="iprepositoryForm.ipAddress" style="width: 100%;"> 
							<el-button slot="append" icon="el-icon-search" @click="queryIpDataList">搜索</el-button> 
						</el-input> 
					</el-form-item> 
				</el-col> 
			
			</el-form>
		</el-row>
		<div class="mainSearchBg">
		<el-table border id="ipManagerTable" ref="customFieldTable" :data="ipTableData" tooltip-effect="dark" tyle="width: 100%,height:750px" @selection-change="changeIpTableFun"> 
			<el-table-column type="selection" width="55" prop="id" @selection-change="changeIpTableFun" align="center"></el-table-column> 
			<el-table-column prop="ipAddress" label="IP地址" align="center"></el-table-column> 
			<el-table-column prop="createTime" :formatter="dateFormat" label="创建时间" align="center"> 
			</el-table-column> 
		</el-table> 
		<table-pagination :pager="ippager" @change="queryIpDataList"></table-pagination>
		</div>
	</el-tab-pane> 
	<el-tab-pane label="访问IP包" name="second"> 
		<el-row>
			<el-form :inline="true" :model="ippackageForm" class="demo-form-inline" ref="customFieldQueryForm">
				<el-col :span="12"> 
					<el-button type="primary" @click="openAddIpPackage"><i class="el-icon-plus"></i>创建IP包</el-button> 
					<el-button type="success" @click="openUpdateIpPackage"><i class="el-icon-edit"></i>修改IP包</el-button> 
					<el-button type="danger" @click="delpackageGroup"><i class="el-icon-delete"></i>删除</el-button> 
				</el-col> 
				<el-col :span="12" style="text-align: right;"> 
					<el-form-item label="IP包名:" prop="ipAddress" label-width="55px"> 
						<el-input v-model="ippackageForm.ipPackageName" placeholder="输入IP包名查询"></el-input>
					</el-form-item> 
					<el-form-item label="包含IP:" prop="ipAddress" label-width="55px"> 
						<el-input v-model="ippackageForm.ipAddress" placeholder="输入包含IP查询"></el-input> 
					</el-form-item> 
					<el-form-item label=""> 
						<el-button icon="el-icon-search" type="primary" @click="queryPackageDataList" style="margin-left: 10px;">搜索</el-button> 
					</el-form-item> 
				</el-col> 			 
			</el-form> 
		</el-row>
		<div class="mainSearchBg">
			<el-table id="ipPackageTable" border ref="customFieldTable" :data="packageTableData" tooltip-effect="dark" @selection-change="changePackageTableFun">
				<el-table-column align="center" type="selection" prop="id" width="55" @selection-change="changePackageTableFun"> 
				</el-table-column> 
				<el-table-column align="center" prop="name" label="包名" width="180"></el-table-column> 
				<el-table-column align="center" prop="ipAddress" label="IP地址" width="500"></el-table-column> 
				<el-table-column align="center" prop="createTime" :formatter="dateFormat" label="创建时间"></el-table-column> 
			</el-table> 
			<table-pagination :pager="packpager" @change="queryPackageDataList"></table-pagination>
			</el-tab-pane> 
	    </div>
	</el-tabs> 
	<!-- 添加IP库弹框 --> 
		<!-- <el-dialog title="添加IP" :visible.sync="dialogIpVisible" width="30%" :before-close="handleClose">  -->
		<el-dialog title="添加IP" :visible.sync="dialogIpVisible" width="530px"> 
			<el-form :inline="true"
			:model="ipAddForm" class="demo-form-inline" ref="ipAddForm"
			:rules="rulesAdd"> 
				<el-form-item label="IP地址" prop="ipAddress"> 
					<el-input @keyup.native="number" maxlength="3" v-model="ipAddForm.ipAddress" style="width: 80px;"></el-input>
					<span>&nbsp;.&nbsp;</span> 
				</el-form-item> 
				<el-form-item label="" prop="ipAddress2">
					<el-input @keyup.native="number2" maxlength="3" v-model="ipAddForm.ipAddress2" style="width: 80px;"></el-input>
					<span>&nbsp;.&nbsp;</span> 
				</el-form-item> 
				<el-form-item label="" prop="ipAddress3">
					<el-input @keyup.native="number3"  maxlength="3"  v-model="ipAddForm.ipAddress3" style="width: 80px;"></el-input>
					<span>&nbsp;.&nbsp;</span> 
				</el-form-item> 
				<el-form-item label="" prop="ipAddress4">
					<el-input @keyup.native="number4" maxlength="3"  v-model="ipAddForm.ipAddress4" style="width: 80px;"></el-input>
				</el-form-item> 
			</el-form> 
			<div slot="footer" class="dialog-footer" style="text-align:center;"> 
				<el-button type="primary" @click="submitipAddForm('ipAddForm')" :disabled="IpconfirmBtnDisabled"  >确 定</el-button>
				<el-button @click="dialogIpVisible = false">取 消</el-button> 				
			</div> 
		</el-dialog> 
		<!-- 添加IP包弹框 --> 
		<el-dialog title="创建IP包"
			:visible.sync="addIpPackageVisible"> <el-form
			:inline="false" :model="ipPackageAddForm" :rules="rules"
			class="demo-form-inline" ref="ipPackageAddForm" label-width="100px">
		<el-form-item label="IP包名称:" prop="name"> <el-input
			v-model="ipPackageAddForm.name" maxlength="100" style="width: 250px;"></el-input>
		</el-form-item> <el-form-item label="已选IP列表:"> <el-button
			type="primary" @click="openIpSelectDiglog">选择IP</el-button>
		</el-form-item> <el-table border id="packAddIpTable" ref="packAddIpTable"
			:data="packAddIpTable" tooltip-effect="dark"> <el-table-column
			type="index" label="序号" prop="id" header-align="center"
			align="center" width="55"></el-table-column> <el-table-column
			align="center" prop="ipAddress" label="IP地址"></el-table-column> <el-table-column
			align="center" prop="operation" label="操作"> <template
			slot-scope="scope"> <el-button
			@click.native.prevent="deleteRow(scope.$index, packAddIpTable)"
			type="text">删除</el-button> </template> </el-table-column> </el-table> </el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center;">
			<el-button type="primary" @click="saveIpPackageData('ipPackageAddForm')"  :disabled="packgeconfirmBtnDisabled"  >提交</el-button>
			<el-button @click="addIpPackageVisible = false">取 消</el-button>
			
		</div>
		</el-dialog> <!--修改IP包弹框 --> <el-dialog title="修改IP包"
			:visible.sync="updateIpPackageVisible"> <el-form
			:inline="false" :model="ipPackageUpdateForm" :rules="rules"
			class="demo-form-inline" ref="ipPackageUpdateForm"
			label-width="100px"> <el-form-item label="IP包名称:"
			prop="name"> <el-input
			v-model="ipPackageUpdateForm.name" maxlength="100"
			style="width: 250px;"></el-input> </el-form-item> <el-form-item label="已选IP列表:">
		<el-button type="primary" @click="openIpSelectDiglog">选择IP</el-button>
		</el-form-item> <el-table border id="packUpdateIpTable" ref="packUpdateIpTable"
			:data="packUpdateIpTable" tooltip-effect="dark"> <el-table-column
			type="index" label="序号" prop="id" header-align="center"
			align="center" width="55"></el-table-column> <el-table-column
			align="center" prop="ipAddress" label="IP地址"></el-table-column> <el-table-column
			align="center" prop="operation" label="操作"> <template
			slot-scope="scope"> <el-button
			@click.native.prevent="deleteRow(scope.$index, packUpdateIpTable)"
			type="text">删除</el-button> </template> </el-table-column> </el-table> </el-form>
		<div slot="footer" class="dialog-footer" style="text-align:center;">
			<el-button type="primary" :disabled="btnDisabled" @click="updateIpPackageData('ipPackageUpdateForm')">提交</el-button>
			<el-button @click="updateIpPackageVisible = false">取 消</el-button>			
		</div>
		</el-dialog> <el-dialog title="选择IP" :visible.sync="addPackageIPSelectVisible"
			@opened="packgeSelectIpOpen" class="chooseDialog"> <el-form
			:inline="true" :model="packageAddSelectForm" class="demo-form-inline"
			ref="packageAddSelectForm"> <el-row> <el-form-item
			prop="ipAddress"> <el-input
			v-model="packageAddSelectForm.ipAddress" placeholder="输入IP查询"></el-input>
		</el-form-item> <el-form-item> <el-button type="primary"
			@click="packgeSelectIpOpen">搜索</el-button> </el-form-item> </el-row> </el-form> <el-table border
			id="packSelectIpTable" ref="customFieldTable"
			:data="packSelectIpTable" tooltip-effect="dark"
			@selection-change="changeSelectIpFun" height="384"> <el-table-column
			align="center" type="selection" width="55" prop="id"
			@selection-change="changeIpTableFun"> </el-table-column> <el-table-column
			align="center" prop="ipAddress" label="IP地址"> </el-table-column> </el-table>
		<div slot="footer" class="dialog-footer" style="text-align:center;">
			<el-button type="primary" @click="packageSelectIpSubmit">提交</el-button>
			<el-button @click="addPackageIPSelectVisible =false">取 消</el-button>			
		</div>
		</el-dialog> </template>
	</div>
	<div th:include="_footer_include :: #jsLib"></div>
	<script>
var ipManagerVM = new Vue({
	el:'#app',
	data:{
		formLabelWidth:'120px',
		ipTableData:[] ,
		packageTableData:[],
		ipManager:"first",
		dialogIpVisible:false,
		dialogPackgeVisible:false,
		addIpPackageVisible:false,
		addPackageIPSelectVisible:false,
		updateIpPackageVisible:false,
		IpconfirmBtnDisabled:false,
		packgeconfirmBtnDisabled:false,
		oldPackageName:'',
        oldPackageId:'',
		selectIpType:'1',
		ippager:{
			total: 0,
			currentPage: 1,
			pageSize: 20,
		},
	    rules:{
	    	name:[{ required: true, message: 'IP包名称不能为空'},
                  {validator:function(rule,value,callback){
     			    var param = {'ipPackageName':value};
     			    if(ipManagerVM.oldPackageId&&ipManagerVM.oldPackageName==value){
     			      callback();
     			    }
     		      axios.post('/ip/ipAccess/queryIpPackageByParam',param)
                     .then(function (response) {
                         var data =  response.data;
                         if(data.code=='0'){
                             var resData = data.data;
                             if(resData.length>0){
                                 callback(new Error("此IP包名称已存在，请修改后提交"));
                             }else{
                                 callback();
                             }
                             
                         }else{
                              callback(new Error("查询IP包名称是否唯一报错"));
                         }
                     })
                     .catch(function (error) {
                       console.log(error);
                     })
                     .then(function () {
                       // always executed
                     });
     			  
     		  },trigger:'blur'}]
        },
        rulesAdd:{
	    	ipAddress:[
	    		{ required: true, message: '不能为空'},
	    		{  max: 3, message: '最大3个字符', trigger: 'blur' },
                {  min: 1, message: '最少1个字符', trigger: 'blur' },
                { validator:function(rule,value,callback){                 
                    if(/^[0-9]*$/.test(value) == false){
                       callback(new Error("请输入数字"));
                    }else{
                       callback();
                    } 
                    callback();
                }, trigger: 'blur'}
	    	],
	    	ipAddress2:[
	    		{ required: true, message: '不能为空'},
	    		{  max: 3, message: '最大3个字符', trigger: 'blur' },
                {  min: 1, message: '最少1个字符', trigger: 'blur' },
                { validator:function(rule,value,callback){                 
                    if(/^[0-9]*$/.test(value) == false){
                       callback(new Error("请输入数字"));
                    }else{
                       callback();
                    } 
                    callback();
                }, trigger: 'blur'}
	    	],
	    	ipAddress3:[
	    		{ required: true, message: '不能为空'},
	    		{  max: 3, message: '最大3个字符', trigger: 'blur' },
                {  min: 1, message: '最少1个字符', trigger: 'blur' }
	    	],
	    	ipAddress4:[
	    		{ required: true, message: '不能为空'},
	    		{  max: 3, message: '最大3个字符', trigger: 'change' },
                {  min: 1, message: '最少1个字符', trigger: 'blur' }
	    	]
        },
    	ipAddForm:{
			ipAddress:'',
			ipAddress2:'',
			ipAddress3:'',
			ipAddress4:''
		},
		packpager:{
			total: 0,
			currentPage: 1,
			pageSize: 20,
		},
		iprepositoryForm: {
			ipAddress: ''
		},
		ippackageForm:{
			ipPackageName:'',
			ipAddress:''
		},
		ipPackageAddForm:{
		  name:''
		},
		ipPackageUpdateForm:{
		name:''
		},
		packageAddSelectForm:{
			ipAddress: ''	
		},
		packAddIpTable:[],
		packUpdateIpTable:[],
		multipleIpSelection:[],
		packSelectIpTable:[],
		multipleAddPackageIpSelection:[],
		multiplePackageTable:[],
		packUpdateIpTable:[],
		outerVisible:false,
		loading:false,
		btnDisabled: false,
	},
	methods:{ 
		//切换页签方法
		handleClick(tab, event){
			var _val = tab.index; 
			if(_val==0){
				this.queryIpDataList();  
			}else{
				this.queryPackageDataList(); 
			}
		},
		handleClose(){

		},
		 openIpAddData(){
		 if(this.$refs['ipAddForm']) {
        	 this.$refs['ipAddForm'].resetFields();
           }
		   ipManagerVM.dialogIpVisible =true;	
		},
		 deleteRow(index, rows) {
			this.$confirm('确认删除【'+rows[index].ipAddress+"】IP地址吗?", '消息提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
            	 rows.splice(index, 1);	
            });
        },
        openAddIpPackage(){
          //打开添加IP包窗口
           ipManagerVM.addIpPackageVisible=true;
           if (this.$refs['ipPackageAddForm']) {
        	   this.$refs['ipPackageAddForm'].resetFields();
          }
           ipManagerVM.selectIpType='1';
           ipManagerVM.packAddIpTable=[];
        },
        //打开IP选择
        openIpSelectDiglog(){
            ipManagerVM.addPackageIPSelectVisible=true;
            if (this.$refs['packageAddSelectForm']) {
         	   this.$refs['packageAddSelectForm'].resetFields();
           }
        },
		//查询ip库列表方法
		queryIpDataList(){ 
			var param = {}; 
			var pageSize = this.ippager.pageSize;
			var pageNum = this.ippager.currentPage;
			var ipAddress = this.iprepositoryForm.ipAddress;
			param.pageSize=pageSize;
			param.pageNum=pageNum;
			param.ipAddress=ipAddress;
			axios.post('/ip/ipAccess/queryRepositoryList',param).then(function (response) {
				if(null==response){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var resobj= response.data;
				if(null==resobj){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				} 
				if(resobj.code!='0'){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var pageData=resobj.data;
				ipManagerVM.ippager.total= pageData.total;
				ipManagerVM.ippager.currentPage = pageData.currentPage;
				ipManagerVM.ippager.pageSize = pageData.pageSize;
				ipManagerVM.ipTableData =pageData.data; 	
			})
			.catch(function (error) {
				console.log(error);
			})
			.then(function () {
			});  

		} ,
		 ipTabCreatePackage(){
		  //通过IP库页签打开添加IP包窗口
	       ipManagerVM.addIpPackageVisible=true;
	       ipManagerVM.packAddIpTable=ipManagerVM.multipleIpSelection;
	       ipManagerVM.selectIpType="1";
	       if (this.$refs['ipPackageAddForm']) {
       	    this.$refs['ipPackageAddForm'].resetFields();
           }
		 },
		 openUpdateIpPackage(){
		    var updateInfo=ipManagerVM.multiplePackageTable;
 	        if(updateInfo.length!=1){
               this.$message({
                      message: '请选择一条数据进行修改',
                      type: 'warning'
                 });
                 return;
             }
 	       if (this.$refs['ipPackageUpdateForm']) {
        	    this.$refs['ipPackageUpdateForm'].resetFields();
            }
 	       ipManagerVM.updateIpPackageVisible=true;
		  //打开修改Ip包
		    var param={};
		    param.id=updateInfo[0].id;
			axios.post('/ip/ipAccess/findPackageById',param).then(function (response){
				if(null==response){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var resobj= response.data;
				if(null==resobj){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				} 
				if(resobj.code!='0'){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var packInfoData=resobj.data;
				ipManagerVM.ipPackageUpdateForm.name=packInfoData.name;
				ipManagerVM.oldPackageName=packInfoData.name;
				ipManagerVM.oldPackageId=packInfoData.id;
				ipManagerVM.packUpdateIpTable=packInfoData.ipRepositorys;
				ipManagerVM.selectIpType='2';
			});
		},
		//查询Ip包列表方法
		queryPackageDataList(){ 
			var param = {}; 
			var pageSize = this.packpager.pageSize;
			var pageNum = this.packpager.currentPage;
			var ipAddress = this.ippackageForm.ipAddress;
			var ipPackageName = this.ippackageForm.ipPackageName;
			param.pageSize=pageSize;
			param.pageNum=pageNum;
			param.ipPackageName=ipPackageName;
			param.ipAddress=ipAddress;
			axios.post('/ip/ipAccess/queryPackageList',param).then(function (response) {
				if(null==response){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var resobj= response.data;
				if(null==resobj){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				} 
				if(resobj.code!='0'){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var pageData=resobj.data;
				ipManagerVM.packpager.total= pageData.total;
				ipManagerVM.packpager.currentPage = pageData.currentPage;
				ipManagerVM.packpager.pageSize = pageData.pageSize;
				ipManagerVM.packageTableData =pageData.data; 
			})
			.catch(function (error) {
				console.log(error);
			})
			.then(function () {
			});	
		},
		//IP多选获取值
		changeIpTableFun(val) {
			this.multipleIpSelection = val;
		},
		changeSelectIpFun(val){
			this.multipleAddPackageIpSelection = val; 
		},
		changePackageTableFun(val){
			this.multiplePackageTable=val;
		},
		//日期数据格式化方法
		dateFormat:function(row, column) {
			var date = row[column.property];
           	if (date == undefined) {
	               return "";
          	}
           	return moment(date).format("YYYY-MM-DD HH:mm:ss");
		},
		//新增Ip提交
		submitipAddForm(formName){
			this.$refs[formName].validate((valid) => {
                if (valid) {
                    var param={};
					 var ip1=ipManagerVM.ipAddForm.ipAddress;
					 var ip2=ipManagerVM.ipAddForm.ipAddress2;
					 var ip3=ipManagerVM.ipAddForm.ipAddress3;
					 var ip4=ipManagerVM.ipAddForm.ipAddress4;
					 param.ipAddress=ip1+"."+ip2+"."+ip3+"."+ip4;
					 ipManagerVM.IpconfirmBtnDisabled=true;
					 axios.post('/ip/ipAccess/findListByIp',param).then(function (response) {
						 if(response.data.data.length>0) {
	            			 ipManagerVM.$message({
	                              type: 'warn',
	                             message: '当前IP已存在请重新输入IP'
	                        }); 
								ipManagerVM.IpconfirmBtnDisabled=false;//启用提交按钮
	            	         return ;
	            	   }
					  axios.post('/ip/ipAccess/saveIpRepository',param).then(function (response) {
							    ipManagerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
									ipManagerVM.dialogIpVisible=false;
									ipManagerVM.IpconfirmBtnDisabled=false;//启用提交按钮
							    ipManagerVM.refreshIpTableData(response);
				        	 }});
							}).catch(function (error) {
								ipManagerVM.IpconfirmBtnDisabled=false;//启用提交按钮
              }); ; 
						 
					 });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });				
		},
		//批量删除Ip数据
		delIpGroup() {
			var deleIpInfo=ipManagerVM.multipleIpSelection;
	       if(deleIpInfo.length <1){
                   this.$message({
                      message: '请选择删除数据',
                      type: 'warning'
                    });
                 return;
             }
	         var packageName="";
	     	var ids=[];	
	        if(null!=deleIpInfo){
	 		    for ( var i = 0; i <deleIpInfo.length; i++){
	 		    	packageName+="【"+deleIpInfo[i].ipAddress+"】";
	 		        ids.push(deleIpInfo[i].id);
	 		     }
	           }
			this.$confirm('确认删除吗'+packageName+"IP地址吗?", '消息提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
        		var  param={};
        		param.deleId=ids;
        		//判断是否有对应IP包
        		axios.post('/ip/ipAccess/findListByRepository',param).then(function (response) {
        		 if(response.data.data.length>0) {
            			 ipManagerVM.$message({
                              type: 'warn',
                             message: '删除IP有对应IP包,请重新选择'
                        }); 
            	         return ;
            	   }
                   var deleIpInfo= ipManagerVM.multipleIpSelection;
        		   var ids=[];
        			if(null!=deleIpInfo&&deleIpInfo.length>0){
        				for ( var i = 0; i <deleIpInfo.length; i++){
        					ids.push(deleIpInfo[i].id);
        				}
        				var param={};
        				param.deleteIds=ids;
        				axios.post('/ip/ipAccess/deleteIpRepository',param).then(function (response) {
        				 ipManagerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
        						ipManagerVM.refreshIpTableData(response);
        	        	  }});	
        				});
        			}else{
      				  this.$message({
    	                    type: 'info',
    	                    message: '请选择删除数据'
    	                });  
    			 }
        		});
            	

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
		},
		delpackageGroup() {
	   //删除IP包数据
		var deleInfo=ipManagerVM.multiplePackageTable;
	     if(deleInfo.length <1){
              this.$message({
                    message: '请选择删除数据',
                    type: 'warning'
                 });
               return;
             }
	        var packageName="";
	    	var ids=[];	
	        if(null!=deleInfo){
	 		   for ( var i = 0; i <deleInfo.length; i++){
	 		      packageName+="【"+deleInfo[i].name+"】";
	 		      ids.push(deleInfo[i].id);
	 		    }
	           }
			this.$confirm('确认要删除'+packageName+"IP包吗?", '消息提醒', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
    		var  param={};
    		param.deleId=ids;
    		//判断是否有IP包与角色对应
    		axios.post('/ip/ipAccess/findListByPackage',param).then(function (response) {
    		 if(response.data.data.length>0) {
    			 ipManagerVM.$message({
                      type: 'warn',
                     message: '删除IP包有对应角色,请重新选择'
                }); 
    	         return ;
    	        }
    			//批量删除ip库数据
    			var deleIpInfo=ipManagerVM.multiplePackageTable;
    			var ids=[];
    			if(null!=deleIpInfo&&deleIpInfo.length>0){
    			  for ( var i = 0; i <deleIpInfo.length; i++){
    					ids.push(deleIpInfo[i].id);
    			   }
    				var param={};
    				param.deleteIds=ids;
    				//执行删除
    				axios.post('/ip/ipAccess/deleteIppackage',param).then(function (response) {
    			    ipManagerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
    					ipManagerVM.queryPackageDataList(); 
    			      }});	
    				});
    			}else{
    				  this.$message({
    	                    type: 'info',
    	                    message: '请选择删除数据'
    	                });  
    			}
    		});
             }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
		},
		packgeSelectIpOpen(){
			//ip包添加选择Ip数据 
			var ipAddress = this.packageAddSelectForm.ipAddress;
			var param = {}; 
			param.ipAddress=ipAddress;
			var type=ipManagerVM.selectIpType;
			var notInAddress=[];
			//新增
			if(type=="1"){
			 var updateTable=ipManagerVM.packAddIpTable;
				 if(null!=updateTable&&updateTable.length>0){
					 for ( var i = 0; i <updateTable.length; i++){
						 notInAddress.push(updateTable[i].id);
					 }  
				  }
			}else{
			  var updateTable=ipManagerVM.packUpdateIpTable;
			  if(null!=updateTable&&updateTable.length>0){
				 for ( var i = 0; i <updateTable.length; i++){
					 notInAddress.push(updateTable[i].id);
				 }  
			  }
			}
			param.deleId=notInAddress;
			param.pageNum=1;
			param.pageSize=1000;
			
			axios.post('/ip/ipAccess/queryRepositoryList',param).then(function (response) {
				if(null==response){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
				 return ;
				}
				var resobj= response.data;
				if(null==resobj){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				} 
				if(resobj.code!='0'){
					ipManagerVM.$message({
                        message: "接口调用失败",
                        type: 'error'
                      }); 
					return ;
				}
				var pageData=resobj.data;
				ipManagerVM.packSelectIpTable =pageData.data; 	
			})
			.catch(function (error) {
				console.log(error);
			})
			.then(function () {
			});  

		},
		packageSelectIpSubmit(){
			//添加包选择Ip返回
			if(ipManagerVM.selectIpType=='1'){
				ipManagerVM.packAddIpTable=ipManagerVM.packAddIpTable.concat(ipManagerVM.multipleAddPackageIpSelection);	
			}else{
				 ipManagerVM.packUpdateIpTable=ipManagerVM.packUpdateIpTable.concat(ipManagerVM.multipleAddPackageIpSelection);
			}
			ipManagerVM.addPackageIPSelectVisible=false;
		},
		saveIpPackageData(formName){
			//新增IP包
		    this.$refs[formName].validate((valid) => {
                if (valid) {
                    //保存IP包数据	 
					var savepackageIp= ipManagerVM.packAddIpTable; 
					var packageName= ipManagerVM.ipPackageAddForm.name; 
					var param={};
					param.name=packageName;
					param.ipRepositorys=savepackageIp;
					ipManagerVM.packgeconfirmBtnDisabled=true;
					axios.post('/ip/ipAccess/saveIpPackage',param).then(function (response) {
						if(null==response){
							ipManagerVM.$message({
		                        message: "接口调用失败",
		                        type: 'error'
													}); 
							ipManagerVM.packgeconfirmBtnDisabled=false;//启用提交按钮
							return ;
						}
						var resobj= response.data;
						if(null==resobj){
							ipManagerVM.$message({
		                        message: "接口调用失败",
		                        type: 'error'
													}); 
							ipManagerVM.packgeconfirmBtnDisabled=false;//启用提交按钮
							return ;
						} 
						if(resobj.code!='0'){
							ipManagerVM.$message({
		                        message: "接口调用失败",
		                        type: 'error'
													}); 
							ipManagerVM.packgeconfirmBtnDisabled=false;//启用提交按钮
							return ;
						}
						ipManagerVM.addIpPackageVisible=false;
						ipManagerVM.addPackageIPSelectVisible=false;
						ipManagerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
						  ipManagerVM.ipManager="second";
							ipManagerVM.queryPackageDataList(); 
							ipManagerVM.packgeconfirmBtnDisabled=false;//启用提交按钮
						 }});	
					  }).catch(function () {
						  ipManagerVM.packgeconfirmBtnDisabled=false;//启用提交按钮
              });
						} else {
								console.log('error submit!!');
								return false;
						}
				});				
		},
		updateIpPackageData(formName){
		    this.$refs[formName].validate((valid) => {
                if (valid) {
                    //修改IP包数据	 
					var savepackageIp= ipManagerVM.packUpdateIpTable; 
					var packageName= ipManagerVM.ipPackageUpdateForm.name; 
					var param={};
					param.name=packageName;
					param.ipRepositorys=savepackageIp;
					param.id=ipManagerVM.oldPackageId;
					ipManagerVM.btnDisabled = true; 
					axios.post('/ip/ipAccess/updateIpPackage',param).then(function (response) {
						if(null==response){
							ipManagerVM.$message({
		                        message: "接口调用失败",
		                        type: 'error'
													}); 
							ipManagerVM.btnDisabled = false; 
							return ;
						}
						var resobj= response.data;
						if(null==resobj){
							ipManagerVM.$message({
		                        message: "接口调用失败",
		                        type: 'error'
													}); 
							ipManagerVM.btnDisabled = false; 						
							return ;
						} 
						if(resobj.code!='0'){
							ipManagerVM.$message({
		                        message: "接口调用失败",
		                        type: 'error'
													});
							ipManagerVM.btnDisabled = false;  
							return ;
						}
						ipManagerVM.updateIpPackageVisible=false;
						ipManagerVM.addPackageIPSelectVisible=false;
						ipManagerVM.$message({message:'操作成功',type:'success',duration:2000,onClose:function(){
							ipManagerVM.btnDisabled = false; 
						  ipManagerVM.queryPackageDataList(); 
						 }});	
						})
						.catch(function(error){
							ipManagerVM.btnDisabled = false; 
						});
					} else {
							console.log('error submit!!');
							return false;
					}
			});				
		},
		refreshIpTableData(response){
			//修改新增Ip后刷新IP列表
			if(null==response){
				ipManagerVM.$message({
                    message: "接口调用失败",
                    type: 'error'
                  }); 
				return ;
			}
			var resobj= response.data;
			if(null==resobj){
				ipManagerVM.$message({
                    message: "接口调用失败",
                    type: 'error'
                  }); 
				return ;
			}        		
			if(resobj.code=='0'){
				ipManagerVM.queryIpDataList();	
			}else{
				ipManagerVM.$message({
                    message: "接口调用失败",
                    type: 'error'
                  }); 
				return;
			}	  
		},
		closeIpAddDialog(){

		},
		number(){
	　　　 	this.ipAddForm.ipAddress=this.ipAddForm.ipAddress.replace(/[^\.\d]/g,'');
		    this.ipAddForm.ipAddress=this.ipAddForm.ipAddress.replace('.','');
	　　},
		number2(){
	　　　 	this.ipAddForm.ipAddress2=this.ipAddForm.ipAddress2.replace(/[^\.\d]/g,'');
		    this.ipAddForm.ipAddress2=this.ipAddForm.ipAddress2.replace('.','');
	　　},
		number3(){
		    this.ipAddForm.ipAddress3=this.ipAddForm.ipAddress3.replace(/[^\.\d\*]/g,'');
		    this.ipAddForm.ipAddress3=this.ipAddForm.ipAddress3.replace('.','');
	　　},
		number4(){
            this.ipAddForm.ipAddress4=this.ipAddForm.ipAddress4.replace(/[^\.\d\*]/g,'');
		    this.ipAddForm.ipAddress4=this.ipAddForm.ipAddress4.replace('.','');
	　　}
	},
	created(){
		var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
		if(localVal){this.ippager.pageSize = localVal;this.packpager.pageSize = localVal;}
		this.queryIpDataList();
	},
	mounted(){
        document.getElementById('app').style.display = 'block';
    }
});
</script>
</body>
</html>